<template>
  <div class="refine_dutylog">
    <h2 class="titleblue">值班日志列表</h2>
    <div class="contant">
      <el-button type="primary" class="create" @click="addLog">新建值班日志</el-button>
      <el-input prefix-icon="el-icon-search" @cleared="searchGroup" clearable placeholder="搜索值班" v-model="groupsearch"
                class="plansearch"><!--  @change='search1' -->
        <span slot="append" @click="searchGroup">搜索</span>
      </el-input>
      <div class="sel-div">
        <label class="sel-label">所属机构</label>
        <el-select clearable v-model="type" class="select-width-100" placeholder="机构选择" @change="dpChanges">
          <el-option v-for="item in gOptions" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
        <el-select clearable v-model="groupname" class="select-width-100" placeholder="部门选择" @change="searchGroup">
          <el-option v-for="item in pOptions" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
        <el-date-picker clearable v-model="time" type="datetime" placeholder="选择日期时间" align="right"
                        :picker-options="pickerOptions" @change="timeChange">
        </el-date-picker>
      </div>
      <!--      <data-table :page='currentPage' :head="thead1" :data="tableData1" @callback="manipulate"-->
      <!--                  :actions="['sub', 'del', 'view']"-->
      <!--                  class="intendance-table"></data-table>-->
      <el-table border stripe :data="tableData1" style="width: 100%" class="intendance-table">
        <el-table-column prop="id" label="序号" align="center" width="60">
          <template slot-scope="scope">
            <span v-if='scope.$index!=9'>{{(currentPage-1).toString()+parseInt(scope.$index+1)}}</span>
            <span v-else>{{currentPage+'0'}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="dutyStart" label="值班开始时间" align="center">
        </el-table-column>
        <el-table-column prop="dutyEnd" label="值班结束时间" align="center">
        </el-table-column>
        <el-table-column prop="usernames" label="值班人员" align="center">
        </el-table-column>
        <el-table-column prop="createTime" label="填写时间" align="center">
          <template slot-scope="scope">
            <span>{{$m(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss')}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createUserName" label="填写人员" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.createUserName ? scope.row.createUserName : scope.row.organiza.name}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="operate" label="操作" align="center" width="140">
          <template slot-scope="scope">
            <el-button size="mini" type="text"
                       @click="manipulate({data: scope.row, index: scope.$index, action: 'sub'})">提交
            </el-button>
            <el-button size="mini" type="text"
                       @click="manipulate({data: scope.row, index: scope.$index, action: 'view'})">查看
            </el-button>
            <el-button size="mini" v-if="delFlag(scope.row)" type="text"
                       @click="manipulate({data: scope.row, index: scope.$index, action: 'del'})">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     layout="total,prev, pager, next, jumper"
                     :total="totalPage" background>
        <!--:current-page.sync="currentPage"-->
      </el-pagination>
    </div>
    <router-view @close="close" :dutylog="dutylog" :id="ddid" :orgId='orgId' :dialogWidth="dialogWidth"
                 :page='currentPage' :sequence="sequence" :orgQuery="orgQuery"
                 @changeWidth="changeWidth" ref="dutyInfo" @update='update'></router-view>
  </div>
</template>

<script>
  import * as dutyLogService from '@/services/DutyLogService.js'
  import * as orgService from '@/services/OrganizationService'
  import DataTable from '@/components/common/DataTable.vue'
  import moment from 'moment'
  // import add from "@/routes/tmp/createlog.vue"
  export default {
    components: {
      'data-table': DataTable
      // add
    },
    data: function () {
      return {
        type: '',
        groupsearch: '',
        time: '',
        groupname: '',
        search: '',
        dutyGroup: '',
        dutyPerson: '',
        dutylog: '',
        gOptions: [],
        pOptions: [],
        thead1: [
          {
            name: '值班开始时间',
            prop: 'dutyStart'
          },
          {
            name: '值班结束时间',
            prop: 'dutyEnd'
          },
          {
            name: '值班人员',
            prop: 'usernames'
          },
          {
            name: '填写时间',
            prop: 'createdate'
          },
          {
            name: '填写人员',
            prop: 'createUserName'
          },
        ],
        tableData1: [],
        toptions: [{
          name: '提交',
          prop: 'submitNo'
        }, {
          name: '编辑',
          prop: 'editNo'
        }, {
          name: '查看',
          prop: 'look'
        }],
        date_choose: '',
        currentPage: 1,
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now()
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date())
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }]
        },
        info_dialog: false,
        adddialog: false,
        totalPage: 0,
        page: 0,
        ddid: '',
        asd: true,
        dialogWidth: '80%',
        orgId: '',
        sequence: null,
        orgQuery: ''
      }
    },
    created() {
      // this.username = localStorage.getItem('cu_id')
      this.getData(0)
      this.getSelect()
    },
    computed: {},
    watch: {
      adddialog: {
        deep: true,
        handler(newVal, oldVal) {
        }
      }
    },
    methods: {
      delFlag(data) {
        var a = moment()
        var b = moment(data.createTime)
        if (a.diff(b, 'days') <= 3 && data.createUserName == this.$profile.fullname) {
          return true
        } else {
          return false
        }
      },
      submit: function () {
      },
      manipulate(param) {
        let orgQuery = '';
        if (this.$profile.organiza.businessOrg === 0 || this.$profile.organiza.businessOrg === 3 || this.$profile.organiza.businessOrg === 4) {
          if (this.$profile.organiza.parentId !== null) {
            // orgQuery = 'organiza.id=_=' + this.$profile.organiza.parentId + ';organiza.parentId=_=' + this.$profile.organiza.parentId + ';'
            orgQuery = 'organiza.id=in=' + this.$profile.organiza.parentId + ',' + this.$profile.organiza.id + ';'
          } else {
            // orgQuery = 'organiza.id=_=' + this.$profile.organiza.id + ';organiza.parentId=_=' + this.$profile.organiza.id + ';'
            orgQuery = 'organiza.id=in=' + this.$profile.organiza.id + ';'
          }
        }
        orgQuery += this.handleQuery()
        if (param.action == 'sub') {
          this.$router.push('/duty-log/edit')
          // this.adddialog = true
          this.dutylog = 'editDuty'
          this.ddid = param.data.id
          this.orgQuery = orgQuery
        }
        if (param.action == 'del') {
          // this.$router.push('/duty-log/edit')
          // // this.adddialog = true
          // this.dutylog = 'editDuty'
          // this.ddid = param.data.id
          this.$confirm('您确定要删除这条日志吗？', '', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            center: true
          }).then((res) => {
            dutyLogService.deleteById(param.data.id).then(res => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.getData(0)
            })
          })
        }
        if (param.action == 'view') {
          this.$router.push('/duty-log/edit')
          this.sequence = param.index
          this.orgQuery = orgQuery
          this.dutylog = 'lookDuty'
          this.ddid = param.data.id
          this.orgId = this.groupname || this.type
        }
      },
      getSelect() {
        let orgQuery = ''
        // 局领导，海事处，执法大队默认查看本部门的人
        if (this.$profile.organiza.businessOrg === 0 || this.$profile.organiza.businessOrg === 3 || this.$profile.organiza.businessOrg === 4) {
          if (this.$profile.organiza.parentId !== null) {
            orgQuery = 'id=_=' + this.$profile.organiza.parentId + ';parentId=_=' + this.$profile.organiza.parentId
          } else {
            orgQuery = 'id=_=' + this.$profile.organiza.id + ';parentId=_=' + this.$profile.organiza.id
          }
        }
        orgService.findAll(orgQuery).then(async res => {
          await res.data.sort((a, b) => {
            if (a.businessOrg < b.businessOrg) {
              return -1
            }
            if (a.businessOrg > b.businessOrg) {
              return 1
            }
            return 0
          })
          this.gOptions = res.data
        })
      },
      handleSizeChange(val) {
        this.getData(val * 1 - 1)
      },
      handleCurrentChange(val) {
        this.getData(val * 1 - 1)
      },
      update() {
        this.adddialog = false
        this.asd = false
        this.getData(0)
      },
      close() {
        this.$router.push('/duty-log')
        this.adddialog = false
        // this.$refs.dutyInfo.lookdetail = false
        this.asd = false
      },
      addLog() {
        // this.adddialog = true
        this.dutylog = 'createDuty'
        this.$router.push('/duty-log/edit')
      },
      getData(val, query = '') {
        let orgQuery = '';
        if (this.$profile.organiza.businessOrg === 0 || this.$profile.organiza.businessOrg === 3 || this.$profile.organiza.businessOrg === 4) {
          if (this.$profile.organiza.parentId !== null) {
            // orgQuery = 'organiza.id=_=' + this.$profile.organiza.parentId + ';organiza.parentId=_=' + this.$profile.organiza.parentId + ';'
            orgQuery = 'organiza.id=in=' + this.$profile.organiza.parentId + ',' + this.$profile.organiza.id + ';'
          } else {
            // orgQuery = 'organiza.id=_=' + this.$profile.organiza.id + ';organiza.parentId=_=' + this.$profile.organiza.id + ';'
            orgQuery = 'organiza.id=in=' + this.$profile.organiza.id + ';'
          }
        }

        dutyLogService.search(val, orgQuery + query).then(res => {
          var dutyList = res.data.map(function (item) {
            item.dutyEnd = item.dutyEnd ? moment(item.dutyEnd).format('YYYY-MM-DD HH:mm:ss') : ''
            item.dutyStart = item.dutyStart ? moment(item.dutyStart).format('YYYY-MM-DD HH:mm:ss') : ''
            return item
          })
          this.tableData1 = dutyList
          this.totalPage = parseInt(res.headers['x-total-count'])
        }).then(res => {
          this.currentPage = val * 1 + 1
        })
      },
      formatDate(now) {
        var date = new Date(parseInt(now))
        var Year = date.getFullYear()
        var Month = date.getMonth() + 1
        var Day = date.getDate()
        var CurrentDate = ''
        CurrentDate += Year + '-'
        if (Month >= 10) {
          CurrentDate += Month + '-'
        } else {
          CurrentDate += '0' + Month + '-'
        }
        if (Day >= 10) {
          CurrentDate += Day
        } else {
          CurrentDate += '0' + Day
        }
        return CurrentDate

      },
      async timeChange() {
        this.currentPage = 1
        let query = await this.handleQuery()
        this.getData(0, query)
      },
      reGetData: function (val) {
        if (this.time) {
          this.getData(val, this.time)
        } else if (this.groupname) {
          this.getData(val, this.groupname)
        } else {
          this.getData(val, '')
        }

      },
      handleQuery() {
        var query = ''
        if (this.groupname) {
          query += 'organiza.id==' + this.groupname
        } else if (this.type) {
          query += 'organiza.id==' + this.type
        }
        if (this.time) {
          if (query.length) {
            query += ';'
          }
          query += 'today==' + this.time
        }
        if (this.groupsearch) {
          if (query.length) {
            query += ';'
          }
          query += 'usernames=_like=' + this.groupsearch
          query += ';users=_like=' + this.groupsearch
        }
        return query
      },
      async dpChanges(val) {
        this.currentPage = 1
        this.groupname = ''
        this.pOptions = []
        for (var i of this.gOptions) {
          if (i.id == val && i.sub) {
            this.pOptions = i.sub
          }
        }
        let query = await this.handleQuery()
        this.getData(0, query)
      },
      //
      async searchGroup() {
        this.currentPage = 1
        let query = await this.handleQuery()
        this.getData(0, query)
      },
      changeWidth(res) {
        this.dialogWidth = res
        // search1 (val) {
        //   this.dutyname = val
        //   this.getData(0)
        // }
      }
    }
  }

</script>

<style lang="scss" scoped>
  .refine_dutylog {
    .contant {
      padding-bottom: 30px;

      .el-col {
        .search-wrap {
          text-align: right;
        }
      }

      .intendance-table {
        margin-top: 20px;
        width: 100%;
        display: inline-block;
      }

      .clear::after {
        content: "";
        display: block;
        clear: both;
      }
    }

    .plan-operate {
      width: 100%;
      display: inline-block;
    }

    .sel-div {
      float: right;
      margin-right: 10px;
    }

    .sel-label {
      margin-left: 10px;
    }

    .planselect {
      float: right;
      margin-right: 10px;
    }

    .planselect input {
      width: 122px;
      border-radius: 4px;
      border: solid 1px #dddddd;
    }

    .plansearch {
      float: right;
      width: 270px;
    }

    .plansearch input {
      width: 200px;
      margin-right: 10px;
      border-radius: 0px;
    }

    .plansearch .el-input-group__append {
      border-left: 1px;
      width: 56px;
      background-color: #0062cd;
      border-radius: 2px;
      font-size: 14px;
      color: #ffffff;
      padding: 0;
      box-sizing: border-box;
      text-align: center;
    }

    .el-date-editor {
      width: 180px;
      box-sizing: border-box;
    }

    .el-date-editor input {
      border-radius: 2px;
      border: solid 1px #dddddd;
    }

    .select-width-100 {
      width: 145px;
    }
  }

  .duty_inset_dialog.contant {
    padding: 20px 50px;
    margin: 0 auto;
  }

  .duty_inset_dialog .duty_action {
    width: 110px;
    float: right;
    margin-left: 10px;
  }

  .duty_inset_dialog .ul_print {
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    margin-top: 20px;
    margin-bottom: 30px;
    overflow: hidden;
  }

  .duty_inset_dialog .ul_print::after {
    content: "";
    display: block;
    clear: both;
  }

  .duty_inset_dialog .ul_print li {
    float: left;
    text-align: center;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    list-style: none;
    box-sizing: border-box;
  }

  .duty_inset_dialog .ul_print li.li-1 {
    width: 160px;
    min-height: 47px;
  }

  .duty_inset_dialog .ul_print li.li-2 {
    width: 160px;
    min-height: 47px;
  }

  .duty_inset_dialog .ul_print li.li-3 {
    width: 85%;
  }

  .duty_inset_dialog .ul_print li.h-middle {
    line-height: 111px;
  }

  .duty_inset_dialog .ul_print li.h-big.h-title {
    line-height: 171px;
    overflow: hidden;
  }

  .refine_createlog {
    .duty_inset_dialog.contant {
      padding: 20px 0px;
      margin: 0 auto;
      width: 962px;
      // overflow: hidden;
    }

    .duty_inset_dialog .duty_action {
      width: 110px;
      float: right;
      margin-left: 10px;
    }

    .duty_inset_dialog .ul_print {
      border-top: 1px solid #ccc;
      border-right: 1px solid #ccc;
      margin-top: 20px;
      margin-bottom: 30px;
      overflow: hidden;
    }

    .duty_inset_dialog .ul_print::after {
      content: "";
      display: block;
      clear: both;
    }

    .duty_inset_dialog .ul_print li {
      float: left;
      text-align: center;
      border-bottom: 1px solid #ccc;
      border-left: 1px solid #ccc;
      list-style: none;
    }

    .duty_inset_dialog .ul_print li.li-1 {
      width: 160px;
      min-height: 47px;
      line-height: 46px;
    }

    .duty_inset_dialog .ul_print li.li-3 {
      width: 800px;
      min-height: 47px;
    }

    .duty_inset_dialog .ul_print li.li-5 {
      width: 320px;
      min-height: 47px;

      .el-date-editor.el-input__inner {
        border: none;
        width: 100%;
        padding: 3px 0px;
        display: block
      }

      .el-date-editor .el-range__icon {
        display: none;
      }

      .el-date-editor .el-range-separator {
        padding: 0px;
      }

      .el-date-editor .el-range-input {
        width: 47%;
      }
    }

    .duty_inset_dialog .ul_print li.h-middle {
      line-height: 111px;
      min-height: 112px;
    }

    .duty_inset_dialog .ul_print li.h-big.h-title {
      line-height: 171px;
    }

    .el-input input {
      border: none;
      text-align: center;
    }

    .el-date-editor.el-input {
      width: 130px;
    }

    .el-input--suffix .el-input__inner {
      padding-right: 0;
      background: transparent
    }

    .duty-person {
      width: 90%;
      float: left;
      display: block;
      line-height: 46px;
      height: 46px;
      border-right: 1px solid #ccc;
    }

    .add-person {
      width: 10%;
      text-align: center;
      float: left;
    }

    .add-person i {
      font-size: 16px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 1px solid #0062cd;
      color: #0062cd;
      cursor: pointer;
    }

    .el-date-editor.el-input__inner {
      border: none;
      width: 320px;
      padding: 3px 0px;
    }

    .el-textarea textarea {
      border: 0px;
      resize: none;
      height: 680px
    }

    .duty-detail {
      height: 681px;
      width: 100%;
      display: block;
      line-height: 30px; // padding: 0px 15px;
      box-sizing: border-box;
    }

    .li-height-47 {
      height: 47px;
      overflow: hidden;
    }

    .duty-detail p {
      width: 100%;
      display: inline-block;
      line-height: 30px;
      text-align: left;
    }

    .h-middle .el-textarea {
      vertical-align: middle;
    }

    .h-report {
      height: 215px;
      line-height: 215px !important
    }

    .reports-detail {
      line-height: 25px !important;
      padding: 0px 10px;
      text-align: left !important;
      height: 215px;
    }

    .reports-detail p label {
      float: left;
    }

    .reports-detail p .el-input {
      width: 80px;
      float: left;
      display: block;
      height: 25px;
    }

    .reports-detail p input {
      border-bottom: 1px solid #333;
      width: 100%;
      border-radius: 0px;
      height: 25px;
    }

    .reports-detail p {
      width: 100%;
      display: inline-block;
    }

    .duty-person li {
      border-bottom: none;
      border-left: none;
      padding: 0px 10px;
    }

    .height-39 {
      min-height: 38px;
      line-height: 38px;
    }

    .height-40 {
      min-height: 39px;
      line-height: 39px;
    }

    .height-171 {
      height: 681px !important;
    }

  }

  .addPerson {
    .main {
      padding: 20px;
      box-sizing: border-box;
      display: block;
    }

    .tree {
      margin: 78px 55px;
    }
  }

  .disabledIpt textarea {
    background-color: #fff !important;
    color: #666 !important;
    cursor: text !important;
  }

  .width-80 {
    width: 100%;
  }

  .width-20 {
    width: 20%;
    height: 39px;
    line-height: 39px;
    position: absolute;
    right: 0;
    border-left: 1px solid #ccc;
    text-align: center;
  }

  .width-20 i {
    cursor: pointer;
    font-style: normal;
  }

  .w-div {
    width: 100%;
    float: left;
    vertical-align: top;
    height: 39px;
    border-top: 1px solid #ccc;
    text-align: left;
    padding: 0px 10px;
    box-sizing: border-box;
  }

  .w-div:first-child {
    border-top: none;
    height: 38px;
  }

  .w-div .el-input {
    float: left;
    height: 39px;
    width: 80%
  }

  .w-div .el-input input {
    float: left;
    height: 38px;
    width: 100%;
    text-align: left;
  }

  .width-100 {
    position: relative;
    min-height: 39px !important;
    line-height: 38px !important;
    box-sizing: border-box
  }

  .v-middle {
    vertical-align: middle;
    line-height: 39px;
  }

  .li-4 {
    width: 160px;
  }

  .margin-top {

  }

  @media only print {
    .noprint {
      display: none
    }

    body {
      overflow: auto !important;
    }

    .el-dialog__wrapper {
      position: absolute;
      bottom: auto;
    }

    #app {
      display: none;
    }
  }

  @media only screen and (max-width: 1200px) {
    .refine_createlog {
      .duty_inset_dialog.contant {
        width: 722px;
      }

      .ul_print li.li-1 {
        width: 120px !important;
      }

      .ul_print li.li-2 {
        width: 120px !important;
      }

      .ul_print li.li-4 {
        width: 120px !important;
      }

      .ul_print li.li-5 {
        width: 240px !important;
      }

      .ul_print li.li-3 {
        width: 600px !important;
      }

      .el-input--suffix .el-input__inner {
        padding-left: 10px;
      }

      .li-time {
        font-size: 13px;
        letter-spacing: -1px;
      }

      .ul_print li.li-5 .el-date-editor .el-range-input {
        font-size: 13px;
        letter-spacing: -1px;
      }
    }

  }

</style>
